<template>
	<view class="container talentdetail-container">
		<image class="page-bg" :src="$fileUrl+'user-bg.png'" mode="widthFix"></image>
		<view class="page-main">
			<view class="page-top">
				<view class="user-header">
					<image class="list-img" :src="userInfo.headPortrait" mode="aspectFit"></image>
					<view class="yuan-btn btn-warning">已认证</view>
				</view>
				<view class="user-info">
					<view class="user-name">{{userInfo.name}}</view>
					<view class="user-type">
						<view v-if="userInfo.territory">
							<template v-for="(item,idx) in JSON.parse(userInfo.territory)" :key="'terr_'+idx">
								<text class="label-type" v-if="idx<2">{{item}}</text>
							</template>
						</view>
					</view>
					<view>
						<view class="list-info" v-if="userInfo.placeCollege">
							<text class="info-title">所属学院：</text>
							<view class="info-words no-warp">
								<template v-for="(item,idx) in JSON.parse(userInfo.placeCollege)" :key="'placeCollege_'+idx">
									{{item}},
								</template>
							</view>
						</view>
						<view class="list-info" v-if="userInfo.placeUnit">
							<text class="info-title">所属单位：</text>
							<text class="info-words">{{userInfo.placeUnit}}</text>
						</view>
						<view class="list-info" v-if="userInfo.phone">
							<text class="info-title">联系方式：</text>
							<text class="info-words">{{userInfo.phone}}</text>
						</view>
						<view class="list-info" v-if="userInfo.email">
							<text class="info-title">email：</text>
							<text class="info-words">{{userInfo.email}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="page-wpanel" v-if="pageType!=='技术经纪人'">
				<view class="panel-filter">
					<text class="filter-list" @click="setContentType('简介')"
						:class="contentType==='简介' && 'filter-active'">
						简介
					</text>
					<text class="filter-list" @click="setContentType('难点突破')"
						:class="contentType==='难点突破' && 'filter-active'">难点突破</text>
					<text class="filter-list" @click="setContentType('核心技术')"
						:class="contentType==='核心技术' && 'filter-active'">核心技术</text>
					<text class="filter-list" @click="setContentType('应用推广')"
						:class="contentType==='应用推广' && 'filter-active'">应用推广</text>
					<text class="filter-list" @click="setContentType('前期成果')"
						:class="contentType==='前期成果' && 'filter-active'">前期成果</text>
				</view>
				<view class="panel-info" v-if="contentType==='简介'">
					<view v-if="!userInfo.briefIntroduction">
						暂无
					</view>
					<template v-else>
						<view v-for="(item,idx) in userInfo.briefIntroduction.split('\n')" :key="'jianj_'+idx">
							{{item}}
						</view>
					</template>
				</view>
				<view class="panel-info" v-if="contentType==='核心技术'">
					<view v-if="!userInfo.coreTechnology">
						暂无
					</view>
					<template v-else>
						<view v-for="(item,idx) in userInfo.coreTechnology.split('\n')" :key="'hex_'+idx">
							{{item}}
						</view>
					</template>
				</view>
				<view class="panel-info" v-if="contentType==='应用推广'">
					<view v-if="!userInfo.promotionUse">
						暂无
					</view>
					<template v-else>
						<view v-for="(item,idx) in userInfo.promotionUse.split('\n')" :key="'yingy_'+idx">
							{{item}}
						</view>
					</template>
				</view>
				<view class="panel-info" v-if="contentType==='难点突破'">
					<view v-if="!userInfo.difficultyBreakThrough">
						暂无
					</view>
					<template v-else>
						<view v-for="(item,idx) in userInfo.difficultyBreakThrough.split('\n')" :key="'nand_'+idx">
							{{item}}
						</view>
					</template>
				</view>
				<view class="panel-info" v-if="contentType==='前期成果'">
					<view v-if="!userInfo.earlierStageAchievement">
						暂无
					</view>
					<template v-else>
						<view v-for="(item,idx) in userInfo.earlierStageAchievement.split('\n')" :key="'qianq_'+idx">
							{{item}}
						</view>
					</template>

				</view>
			</view>
			<view class="page-wpanel" v-else>
				<view class="page-title">能力等级</view>
				<view class="panel-info">{{userInfo.capabilityLevel}}</view>
				<view class="page-title">个人简介</view>

				<view class="panel-info">
					<view v-if="!userInfo.skillBriefIntroduction">
						暂无
					</view>
					<template v-else>
						<view v-for="(item,idx) in userInfo.skillBriefIntroduction.split('\n')" :key="'qianq_'+idx">
							{{item}}
						</view>
					</template>
				</view>

				<view class="page-title">个人照片</view>
				<image class="panel-info-img" :src="userInfo.headPortrait" mode="widthFix"></image>
			</view>
			<view class="page-panel" v-if="userInfo.skillCorrelationPicture">
				<view class="page-title">相关图片</view>
				<image class="related-img" :src="item" mode="widthFix"
					v-for="item in JSON.parse(userInfo.skillCorrelationPicture)"></image>
			</view>
			<view class="page-wpanel" v-if="userInfo.practitionerCase">
				<view class="page-title">从业案例</view>
				<view class="page-list-box">
					<view class="an-list" v-for="item in JSON.parse(userInfo.practitionerCase)">
						<view class="an-title text-nowarp">{{item.name}}xxx</view>
						<view class="an-l-info">
							<text class="an-l-title">日期：</text>
							{{item.date}}
						</view>
						<view class="an-l-info">
							<text class="an-l-title">转化类型：</text>
							{{item.type}}
						</view>
						<view class="an-l-info">
							<text class="an-l-title">促成转化金额：</text>
							{{item.money}}万元
						</view>
					</view>

				</view>
			</view>

			<view class="page-wpanel">
				<view class="page-title">相关成就</view>
				<view class="panel-filter">
					<text class="filter-list" @click="setReleaseType('发布需求')"
						:class="releaseType==='发布需求' && 'filter-active'">
						发布需求
					</text>
					<text class="filter-list" @click="setReleaseType('发布成果')"
						:class="releaseType==='发布成果' && 'filter-active'">发布成果</text>
					<text class="filter-list" @click="setReleaseType('已转化成果')"
						:class="releaseType==='已转化成果' && 'filter-active'">已转化成果</text>
				</view>
				<view class="page-list-box" v-if="releaseType==='发布需求'">
					<DemandList @click="jump('/pages/index/demandDetail?id='+item.id)" v-for="item in rightInfo"
						:key="item.id" :listInfo="item" />

				</view>
				<view class="page-list-box" v-else-if="releaseType==='发布成果'">
					<AchList @click="jump('/pages/index/achDetail?id='+item.id)" v-for="item in rightInfo" :key="item.id"
						:listInfo="item" />

				</view>
				<view class="page-list-box" v-else-if="releaseType==='已转化成果'">
					<AchList @click="jump('/pages/index/achDetail?id='+item.id)" v-for="item in rightInfo" :key="item.id"
						:listInfo="item" />

				</view>

				<view class="not-more" v-if="isLoading">加载中...</view>
				<view class="null-page" v-else-if="rightInfo.length<=0 ">
					<text class="iconfont">&#xe642;</text>
					<view class="null-page-tips">暂无数据~</view>
				</view>
				<!-- <view class="not-more" v-else-if="notMore">没有更多了...</view> -->
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app"
	import DemandList from '@/components/demandList.vue'
	import AchList from '@/components/achList.vue'
	import { hideLoading, showLoading } from '@/common/util';
	import api from '@/common/api';
	const isLoading = ref(false)
	const notMore = ref(true)
	const pageList = ref([{}])

	const contentType = ref('简介')
	const setContentType = (type : string) => {
		contentType.value = type
	}

	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}

	let pageId = ''
	let pageType = ''
	onLoad((options) => {
		pageId = options.id;
		pageType = options.pageType;
	})
	onMounted(() => {
		if (pageType === '技术经纪人') {
			uni.setNavigationBarTitle({ title: '技术经纪人' });
		}
		getDetailInfo()
	})
	const detailInfo = ref<any>({})
	const userInfo = ref<any>({})
	const rightInfo = ref<any[]>([])
	const getDetailInfo = async () => {
		showLoading()
		try {
			const res = await api.findTalentPoolMessage({
				id: pageId,
			})
			detailInfo.value = res.data
			userInfo.value = res.data.userInfo
			rightInfo.value = res.data.demandDataS || []
		} finally {
			
			hideLoading()
		}

	}
	const releaseType = ref('发布需求')
	const setReleaseType = (type : string) => {
		releaseType.value = type
		if (type === '发布需求') {
			rightInfo.value = detailInfo.value.demandDataS || [];
		} else if (type === '发布成果') {
			rightInfo.value = detailInfo.value.achievementData || [];
		} else {
			rightInfo.value = detailInfo.value.conversionDataS || [];
		}
	}
</script>

<style lang="scss">
	.talentdetail-container {
		.page-bg {
			width: 100%;
			height: 1624rpx;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.page-main {
			position: relative;
			z-index: 2;

		}

		.page-top {
			display: flex;
			padding: 30rpx;
			background-color: #fff;
			width: 680rpx;
			margin: 30rpx auto;
			border-radius: 10rpx;
		}

		.list-img {
			width: 110rpx;
			height: 110rpx;
			border: 1px solid #FFD706;
			border-radius: 110rpx;
		}

		.user-info {
			flex-grow: 1;
			width: 500rpx;
		}

		.user-header {
			margin-right: 30rpx;

			.yuan-btn {
				font-size: 24rpx
			}
		}

		.user-name {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 10rpx;
		}

		.list-info {
			display: flex;
			align-items: center;
			margin-top: 6rpx;
		}

		.info-title {
			font-size: 26rpx;
			color: #82848A;
			flex-shrink: 0;
		}

		.info-words {
			font-size: 26rpx;
			color: #333333;
			flex-grow: 1;
			width: 500rpx;
		}

		.page-wpanel {
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
			padding: 0 30rpx 20rpx 30rpx;
			margin-top: 20rpx;
		}

		.panel-filter {
			height: 80rpx;
			display: flex;
			align-items: center;
			border-bottom: solid 1px #eee;
			justify-content: space-between;
		}

		.panel-info {
			font-size: 28rpx;
			color: #222;

		}

		.filter-list {
			padding: 0 10rpx;
			font-size: 28rpx;
			color: #82848A;
		}

		.filter-active {
			color: #232323;
			font-weight: bold;
		}

		.page-panel {
			margin-top: 20rpx;
			padding: 0 30rpx;
			background-color: #F9F9F9;
		}

		.page-title {
			font-size: 32rpx;
			color: #333;
			line-height: 80rpx;
			font-weight: bold;
		}

		.related-img {
			width: 100%;
			border-radius: 12rpx;
		}

		.an-list {
			box-shadow: 0px 8rpx 16rpx 0px rgba(47, 101, 243, 0.1);
			margin-bottom: 20rpx;
			padding: 20rpx;
		}

		.an-title {
			font-size: 28rpx;
			color: #232323;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.an-l-info {
			font-size: 26rpx;
			color: #333333;
		}

		.an-l-title {
			color: #82848A;
		}

		.panel-info-img {
			width: 188rpx;
			height: 200rpx;
		}
	}
</style>